<template>
  <!-- 饼图 -->
  <div class="pie_select">
    <el-radio-group v-model="selectLabel" size="large" @change="changeData">
      <el-radio-button label="sale_">销量</el-radio-button>
      <el-radio-button label="_money">销售额</el-radio-button>
    </el-radio-group>
    <el-select v-model="selectDay" class="m-2" placeholder="Select" size="large" @change="changeData">
      <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value" />
    </el-select>
  </div>
  <div id="pieDemo" style="width: 100%; height: 400px"></div>
  <el-divider />
  <!-- 地图 -->
  <div id="mapDemo" style="width: 100%; height: 500px"></div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs } from 'vue'
import * as echarts from 'echarts'
import { EChartsOption, EChartsType, PieSeriesOption } from 'echarts'
import { home } from '@/request/api'
import china from '@/json/china.json'
// 基于准备好的dom，初始化echarts实例
let myChartPie: EChartsType
let myChartMap: EChartsType
// 注册地图
echarts.registerMap('china', china as any)
const pieData = ref<ISalePieModel[]>()
const state = reactive({
  // 单选框 数据
  selectLabel: 'sale_',
  // 选择器 数据
  selectDay: 'yesterday',
  // 选择器 列表
  options: [
    { name: '昨天', value: 'yesterday' },
    { name: '今天', value: 'today' },
    { name: '前3天', value: 'three_days' },
    { name: '前7天', value: 'seven_days' },
    { name: '前14天', value: 'fourteen_days' },
    { name: '前30天', value: 'thirty_days' },
    { name: '前60天', value: 'sixty_days' },
  ],
})
const { selectDay, selectLabel, options } = toRefs(state)
// 选项按钮
const changeData = () => {
  type TypeKey = keyof ISalePieModel
  let key: TypeKey
  if (selectLabel.value === '_money') {
    key = (selectDay.value + selectLabel.value) as TypeKey
  } else {
    key = (selectLabel.value + selectDay.value) as TypeKey
  }
  console.log('拼接前', selectDay.value, selectLabel.value, '拼接后', key)
  let data = pieData.value!.map((item) => ({ value: item[key] as string, name: item.name }))
  myChartPieFn(data)
}
onMounted(async () => {
  myChartPie = echarts.init(document.getElementById('pieDemo')!)
  myChartMap = echarts.init(document.getElementById('mapDemo')!)
  // 请求图表数据
  let res = await home.APIAdminStat()
  console.log(res)
  pieData.value = res.data.salePie
  const mapData = res.data.saleMap
  const data: PieSeriesOption[] = pieData.value.map((item) => ({ value: item.sale_yesterday, name: item.name }))
  const data2: PieSeriesOption[] = mapData.map((item) => ({ value: item.saleNum, name: item.areaName }))
  // console.log(data)
  myChartPieFn(data)
  // 地图
  myChartMap.setOption({
    title: {
      text: '全国销量分布图',
      left: 'center',
    },
    // 提示框组件。
    tooltip: {
      trigger: 'item',
      formatter: '{b}<br/>销量：{c}',
      backgroundColor: 'rgba(50,50,50,0.7)',
      borderColor: 'transparent',
      textStyle: { color: '#fff' },
    },
    // 左下角图标
    visualMap: {
      type: 'continuous',
      min: 0,
      max: 1000000,
      calculable: true,
      inRange: {
        color: ['#fff', 'red', '#a62a29'],
      },
    },
    series: [
      {
        type: 'map',
        map: 'china',
        selectedMode: false,
        zoom: 1.5,
        top: '30%',
        emphasis: {
          label: { show: false },
          itemStyle: { areaColor: '#8884d8' },
        },
        itemStyle: { borderColor: '#fff' },
        data: data2,
      },
    ],
  } as EChartsOption)
})
const myChartPieFn = (data: PieSeriesOption[]) => {
  // 配置项对象
  let option: EChartsOption = {
    // 提示框组件。
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(50,50,50,0.7)',
      borderColor: 'transparent',
      textStyle: { color: '#fff' },
    },
    // 图例
    legend: {
      orient: 'vertical',
      height: 100,
      top: 20,
      right: 10,
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        // 饼图文本
        label: {
          color: 'inherit',
        },
        // 高亮扇区
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
        data: [],
      },
    ],
  }
  // 更新 option 的 data 数据
  ;(option.series as PieSeriesOption[])[0].data = data
  // 绘制图表
  myChartPie.setOption(option)
}
</script>

<style lang="less" scoped>
.pie_select {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
